<template>
  <div id="addQuestionView">
    <h2>题目创建</h2>
    <a-form :model="form" :layout="layout" :style="{ width: '1000px' }">
      <a-form-item field="title" label="题目标题">
        <a-input
          v-model="form.title"
          placeholder="请输入题目标题"
          :style="{ width: '500px' }"
        />
      </a-form-item>
      <a-form-item field="tags" label="题目标签">
        <a-input-tag
          v-model="form.tags"
          :style="{ width: '390px' }"
          placeholder="请输入题目标签"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="content" label="题目内容">
        <MdEditor :value="form.content" :handle-change="onMdContentChange" />
      </a-form-item>
      <a-form-item field="answer" label="题目答案">
        <MdEditor :value="form.answer" :handle-change="onMdAnswerChange" />
      </a-form-item>
      <a-form-item field="judgeCase" label="测试用例" />
      <a-form-item
        v-for="(judgeCaseItem, index) of form.judgeCase"
        :key="index"
        :style="{ width: '390px', margin: '0px' }"
      >
        <a-space direction="vertical" style="min-width: 480px">
          <a-form-item
            :field="`form.judgeCase[${index}].input`"
            :label="`输入`"
            :key="index"
          >
            <a-input
              v-model="judgeCaseItem.input"
              placeholder="请输入测试输入用例"
            />
          </a-form-item>
          <a-form-item
            :field="`form.judgeCase[${index}].output`"
            :label="`输出`"
            :key="index"
          >
            <a-input
              v-model="judgeCaseItem.output"
              placeholder="请输入测试输出用例"
            />
          </a-form-item>
        </a-space>
        <a-form-item>
          <a-button
            @click="handleDelete(index)"
            :style="{ marginLeft: '10px' }"
            status="danger"
            >删除测试用例
          </a-button>
        </a-form-item>
      </a-form-item>
      <div style="margin-left: 200px; margin-bottom: 20px">
        <a-button @click="handleAdd" status="success">添加测试用例</a-button>
      </div>
      <a-form-item field="judgeConfig" label="时间限制">
        <a-input-number
          :style="{ width: '320px' }"
          placeholder="请输入时间限制"
          v-model="form.judgeConfig.timeLimit"
          mode="button"
          class="input-demo"
          min="0"
        />ms
      </a-form-item>
      <a-form-item field="judgeConfig" label="内存限制">
        <a-input-number
          :style="{ width: '320px' }"
          placeholder="请输入内存限制"
          v-model="form.judgeConfig.memoryLimit"
          mode="button"
          class="input-demo"
          min="0"
        />B
      </a-form-item>
      <a-form-item field="judgeConfig" label="堆栈限制">
        <a-input-number
          :style="{ width: '320px' }"
          placeholder="请输入堆栈限制"
          v-model="form.judgeConfig.stackLimit"
          mode="button"
          class="input-demo"
          min="0"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" size="large" @click="doSubmit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import message from "@arco-design/web-vue/es/message";
import { QuestionControllerService } from "../../../generated";
import { useRoute, useRouter } from "vue-router";

const layout = ref("horizontal");
const router = useRouter();
const route = useRoute();
// 如果页面地址包含 update，视为更新页面
const updatePage = route.path.includes("update");

const form = ref({
  answer: "",
  content: "",
  judgeCase: [
    {
      input: "",
      output: "",
    },
  ],
  judgeConfig: {
    memoryLimit: 1000000,
    stackLimit: 1000,
    timeLimit: 1000,
  },
  tags: [],
  title: "",
});

/**
 * 如果是update页面，就根据题目id获取原题目数据
 * @param v
 */
const loadData = async () => {
  const id = route.query.id;
  if (!id) {
    return;
  }
  const result = await QuestionControllerService.getQuestionByIdUsingGet(
    id as any
  );
  if (result.code === 0) {
    form.value = result.data as any;
    //判断用例
    if (!form.value.judgeCase) {
      form.value.judgeCase = [
        {
          input: "",
          output: "",
        },
      ];
    } else {
      // 将判断用例由json字符串改为 对象
      form.value.judgeCase = JSON.parse(form.value.judgeCase as any);
    }
    //判断配置
    if (!form.value.judgeConfig) {
      form.value.judgeConfig = {
        memoryLimit: 1000,
        stackLimit: 1000,
        timeLimit: 1000,
      };
    } else {
      // 将判断配置由json字符串改为 对象
      form.value.judgeConfig = JSON.parse(form.value.judgeConfig as any);
    }
    //标签
    form.value.tags = JSON.parse(form.value.tags as any);
  } else {
    message.error("加载失败，" + result.message);
  }
};

onMounted(() => {
  loadData();
});
const onMdContentChange = (v: string) => {
  form.value.content = v;
};
const onMdAnswerChange = (v: string) => {
  form.value.answer = v;
};
const doSubmit = async () => {
  if (updatePage) {
    // 是修改界面
    const result = await QuestionControllerService.updateQuestionUsingPost(
      form.value
    );
    if (result.code === 0) {
      //题目修改成功跳转到题目管理界面
      router.push({
        path: "/manage/question",
      });
      message.success("题目修改成功");
    } else {
      message.error("题目修改失败，" + result.message);
    }
  } else {
    //是添加界面
    const result = await QuestionControllerService.addQuestionUsingPost(
      form.value
    );
    if (result.code === 0) {
      message.success("题目添加成功");
    } else {
      message.error(result.message);
    }
  }
};

/**
 * 新增判题用例
 */
const handleAdd = () => {
  form.value.judgeCase.push({
    input: "",
    output: "",
  });
};
/**
 * 删除判题用例
 * @param index
 */
const handleDelete = (index: number) => {
  form.value.judgeCase.splice(index, 1);
};
</script>

<style scoped>
#addQuestionView {
}
</style>
